<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item label="广告位名称" prop="advposname">
          <el-input
            v-model="queryData.advposname"
            size="small"
            placeholder="请输入广告位名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            class="blueBtn"
            @click="searchBtn"
            >搜索</el-button
          >
          <el-button size="small" icon="el-icon-refresh" @click="resetBtn"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 新增、导出、右侧按钮 -->
      <el-row :gutter="20" type="flex" justify="space-between">
        <!-- 新增、导出按钮 -->
        <div class="btnBox">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="addBtn"
            >新增</el-button
          >
          <el-button
            type="warning"
            plain
            size="mini"
            icon="
         el-icon-download"
            >导出</el-button
          >
        </div>
        <!-- 右侧图标 -->
        <RightIcon />
      </el-row>
      <br />

      <!-- 表格区域 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column prop="advposname" label="广告位名称">
        </el-table-column>
        <el-table-column prop="advposdesc" label="广告位描述">
        </el-table-column>
        <el-table-column prop="advposnum" label="广告位数量"> </el-table-column>
        <el-table-column prop="advpossize" label="广告位尺寸">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="getAdvposInfo(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delRow(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="queryData.page"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 30, 50, 100]"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- dialog 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="40%"
      @close="closeHandler"
    >
      <el-form
        :model="formData"
        ref="form"
        :rules="formRules"
        label-width="120px"
        :inline="false"
        size="small"
      >
        <el-form-item label="广告位名称" prop="advposname">
          <el-input
            v-model="formData.advposname"
            style="width: 500px"
            placeholder="请输入广告位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="广告位描述" prop="advposdesc">
          <el-input
            v-model="formData.advposdesc"
            style="width: 500px"
            type="textarea"
            placeholder="请输入广告位描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="广告位尺寸" prop="advpossize">
          <el-input
            v-model="formData.advpossize"
            style="width: 500px"
            placeholder="请输入广告位尺寸"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="isShow = false">取消</el-button>
          <el-button size="small" type="primary" @click="addAdvposList"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import RightIcon from "@/components/RightIcon";
import {
  getAdvposListApi,
  addAdvposApi,
  delAdvposApi,
  getAdvposInfoApi,
  editAdvposInfoApi,
} from "@/api/advpos";
export default {
  components: { RightIcon },
  data() {
    return {
      queryData: {
        advposname: "",
        advposdesc: "",
        page: 1,
        limit: 10,
      },

      // 表单数据
      formData: {
        advposname: "",
        advposdesc: "",
        advpossize: "",
      },

      // 表单校验
      formRules: {
        advposname: [
          { required: true, message: "请输入广告位名称", trigger: "blur" },
        ],
        advposdesc: [
          { required: true, message: "请输入广告位描述", trigger: "blur" },
        ],
        advpossize: [
          { required: true, message: "请输入广告位尺寸", trigger: "blur" },
        ],
      },
      list: [],
      total: 0,
      // 控制弹窗变量
      isShow: false,
    };
  },
  created() {
    this.getAdvposList();
  },
  computed: {
    title() {
      return this.formData.id ? "修改广告位" : "添加广告位";
    },
  },
  methods: {
    // 获取到页面数据
    async getAdvposList() {
      let res = await getAdvposListApi(this.queryData);
      console.log(res);
      this.list = res.data;
      // 总数赋值
      this.total = res.count;
    },

    // 页码改变事件
    currentChange(val) {
      this.queryData.page = val;
      this.getAdvposList();
    },

    // 页面条数发生改变
    sizeChange(val) {
      this.queryData.limit = val;
      this.getAdvposList();
    },

    // 搜索事件
    searchBtn() {
      this.queryData.page = 1;
      this.getAdvposList();
    },

    // 重置事件
    resetBtn() {
      this.queryData = {
        advposname: "",
        advposdesc: "",
        page: 1,
        limit: 10,
      };
      this.getAdvposList();
    },

    // 新增按钮
    addBtn() {
      this.isShow = true;
    },

    // 关闭弹窗
    closeHandler() {
      // 清空表单
      this.formData = {
        advposname: "",
        advposdesc: "",
        advpossize: "",
      };
      // 移除校验
      this.$refs.form.clearValidate();
    },

    // 添加事件
    async addAdvposList() {
      try {
        // 1. 表单校验
        this.$refs.form.validate();
        // 2. 发起网络请求
        this.formData.id
          ? await editAdvposInfoApi(this.formData)
          : await addAdvposApi(this.formData);
        // 3. 提示成功
        this.$message.success(this.formData.id ? "修改成功" : "添加成功");
        // 4. 关闭弹窗
        this.isShow = false;
        // 5. 更新列表
        this.getAdvposList();
      } catch (error) {
        console.log(error);
      }
    },

    // 删除事件
    async delRow(id) {
      // 1. 提示框确认
      await this.$confirm("确认删除么？");
      // 2. 发起网络请求
      await delAdvposApi(id);
      // 3. 提示成功
      this.$message.success("删除成功");
      // 4. 边缘处理
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      // 5. 重新获取页面
      this.getAdvposList();
    },

    // 编辑数据回显
    async getAdvposInfo(id) {
      // 获取数据
      let res = await getAdvposInfoApi(id);
      // console.log(res);
      // 赋值变量
      this.formData = res;
      // 打开弹窗
      this.isShow = true;
    },
  },
};
</script>

<style scoped>
/* 搜索按钮颜色样式 */
.blueBtn {
  background-color: #409eff;
  border: none;
}
.btnBox {
  margin-left: 10px;
}
.right-icon {
  margin-right: 10px;
}
/* 分页器在行末 */
.pagination {
  display: flex;
  flex-direction: row-reverse;
}
</style>
